$(document).ready(function(){
    
    //
    $(window).bind('hashchange', function() {
        navigate();
        return false;
    });
    
    
    /*
     * Fixar så  man kan navigera via piltagenter
     */
    $(document).keydown(function(e){ 
        var currentStep = Number($("#currentStep").html());
        var prevStep = currentStep-1;
        var nextStep = currentStep+1;
        var length = Number($("#tutorialLength").html());
		var tutID = $("#tutorialID").text();
    
		if (tutID != -1) {
			if(currentStep != 0 && (e.which == 37 || e.which == 38)){ //up left
				window.location.href = "#t/"+$("#tutorialID").text()+"/"+prevStep;
			}
			else if(nextStep != length && (e.which == 39 || e.which == 40)){ //down right
				window.location.href = "#t/"+$("#tutorialID").text()+"/"+nextStep;
			}
		}
    });
	
    /*
     * Splittar allt efter hashtagen och kör olika funktioner från de
     */
    function navigate() {
        parameterString = window.location.hash.substr(1);
        parameters = parameterString.split("/");
		
        if (parameters[0] != "") {
            if (parameters[0] == "s") {
				$("#oneTutorial").hide();
				$("#showAll").show();
				$("#tutorialID").text("-1");
				$("#btnPrev a").removeAttr('href');
				$("#btnPrev a").css("color", "#333");
				$("#btnNext a").removeAttr('href');
				$("#btnNext a").css("color", "#333");
				$("#commentToggel").hide();
				$("#commentAdd").hide();
				if ($("#allTutorials").length < 1) {
					$.getJSON("tutorial/all/", function(response) {
						$("#showAll").append('<table id="allTutorials"></table>');
						$("#allTutorials").append('<thead><tr><th>Title</th><th>Description</th><th>Author</th><th>Rating</th></tr></thead><tbody></tbody>');
						$(response.allTutorials).each(function(index, tutorial){
							row = "<tr>";
							row += '<td><a href="#t/' + tutorial.id + '">' + tutorial.title + "</a></td>";
							row += '<td><a href="#t/' + tutorial.id + '">' + tutorial.description + "</a></td>";
							row += '<td><a href="#u/' + tutorial.createdBy.id + '">' + tutorial.createdBy.name + "</a></td>";
							row += '<td>' + tutorial.rate + "</td>";
							row += "</tr>";
							$("#allTutorials tbody").append(row);
						});
						$("#allTutorials").dataTable({
							"bJQueryUI": true,
							"iDisplayLength": 15,
							"aLengthMenu": [[15], [15]]
						});
					});
				}
            } else if(parameters[0] == "t") {
				$("#showAll").hide();
				$("#oneTutorial").show();
				$("#commentToggel").show();
				$("#commentAdd").show();
                // Om en tutorial finns angiven
                if (parameters.length > 1) {
                    // Om tutorialen Ã¤r angiven i rÃ¤tt format
                    if(isInt(parameters[1])) {
                        // Om det finns substeps angivna
                        if (parameters.length > 2) {
                            // Och om substepsen Ã¤r angivna i rÃ¤tt format
                            if(isInt(parameters[2])) {
                                // Om den tutorialen vi frÃ¥gar efter Ã¤r den som Ã¤r renderad
                                if ($("#tutorialID").text() == parameters[1]) {
                                    parseStep(parameters[1], parameters[2]);
                                } else {
                                    $.getJSON("tutorial/show/" + parameters[1], function(response) {
                                        renderTutorial(response);
                                        parseStep(parameters[1], parameters[2]);
                                    });
                                }
                            } else {
								
                        }
                        } else {
                            $.getJSON("tutorial/show/" + parameters[1], function(response) {
                                renderTutorial(response);
                                parseStep(parameters[1], 0);
                            });
                        }
                    } else {
						
                }
                }
            }
        }else{ //om inga parametrar skickas med
            window.location.href = "#s";
        }
    }
    navigate();
    
    /*
     * Funktionen hanterar comment när man trycker på add. Lägger till en ny comment i commentcontainer
     * Scrollar också ner till botten av sidan och visar comment container
     */
    $("#commentAdd .commentButton").click(function() { 
        $("#commentContainer").slideDown();
        $("#commentToggel .commentButton").text("Hide comments");
        $("html").animate({
                scrollTop: $(document).height()
            }, "slow");
        if($("#newCommentText").length < 1){  
            var commentHtml = "";     
            commentHtml += "<div class=\"comment\"><div class=\"commentTop\">Comment text:</div>";
            commentHtml += '<div class=\"commentContent\"><textarea id="newCommentText" name="newCommentText" /></div>';
            commentHtml += '<div class=\"commentBottom\"><input type="submit" value="Submit" /></div></div>';
            $("#commentContainer").append(commentHtml);
        }    
    });
    
    /*
     * Visar kommentarerna om de är dolda
     */
    $("#commentToggel .commentButton").click(function(){
        if($("#commentContainer").css("display") == "none"){
            $("#commentContainer").slideDown();
            $("#commentToggel .commentButton").text("Hide comments");
        }
        else{
            $("#commentContainer").slideUp();
            $("#commentToggel .commentButton").text("Show comments");
        }
    });
	
        
    /*
     * Renderar tutorial. Fyller på med alla steps som och sätter title på sida och lägger en del info i dolda divs
     */
    function renderTutorial(tutorial) { 
        $('title').text(tutorial.title+" @ TutWiz");
        
        $('#tutorialProgress').css("display", "inherit");
        $("#commentToggel").css("display", "inherit");
        $("#commentAdd").css("display", "inherit");
        
        $("#tutorialID").html(tutorial.id);
        $("#tutorialLength").html(tutorial.steps.length);
        $("#tutorialMeta").html(tutorial.title + " <i> by </i> <a href=\"#u/" + tutorial.createdBy.id + "\"> " + tutorial.createdBy.name + "</a>");
        $("#nav").html("");
        $(tutorial.steps).each(function(index, step) {
            $("#nav").append("<div class=\"tutorialStep\"><a href=\"#t/" + tutorial.id + "/" + step.order + "\">" + step.title + "</a></div>");
        });	
    }
    
    /*
     * Hämtar json data för ett step och kör render step
     */
    function parseStep(tutorialId, order){ 
        $.getJSON("step/show/"+tutorialId+"/"+order, function(response) {
            renderStep(response);
        });
    }
    
    /*
     * Renderar data för ett step. Sätter knappar, next och prev. Sätter progressbar. Sätter step data och text och eventuell länk etc. Renderar comments
     */
    function renderStep(step) {  
        $("#tutorialEntry h1").text(step.title); 
        $("#currentStep").html(step.order);
        
        $("#stepText").text(step.text);
        
        var tutId = $("#tutorialID").html();
        var stepNo = Number(step.order)+1;
        var stepPrev = Number(step.order)-1;
        var length = Number($("#tutorialLength").text());
        
        if(stepNo == 1){
            $("#btnPrev a").removeAttr('href');
            $("#btnPrev a").css("color", "#333");
        }else{
            $("#btnPrev a").attr("href", "#t/"+tutId+"/"+stepPrev);
            $("#btnPrev a").css("color", "#fff");
        }
        
        if(stepNo == length){
            $("#btnNext a").removeAttr('href');
            $("#btnNext a").css("color", "#333");
        }else{
            $("#btnNext a").attr("href", "#t/"+tutId+"/"+stepNo);
            $("#btnNext a").css("color", "#fff");
        }
        
        
        $("#progressText").text(stepNo+"/"+length);
        
        $('#progressText').stop(true, true).animate({
            marginTop: 445*(stepNo/length)
        });
        
        $('#progressBarCompleted').stop(true, true).animate({
            height: 460*(stepNo/length)
        });
        
        //
        
        $("#nav .tutorialStep").each(function (){
            $(this).removeClass("currentStep");
            $(this).removeClass("nextStep")
        });
        
        console.log(step.link);
       
        if(step.link != "null"){
            $("#stepData").html('<p id="stepLink"><a href="'+ step.link +'" target="_blank">' + step.link + '</a></p>');
        }
        else if(step.image != "null"){
            $("#stepData").html('<p id="stepImage"><a href="'+ step.image +'" target="_blank">View image</a></p>');
        }
        var index = Number(step.order)+1;
        var secondIndex = index+1;
         
        $("#nav .tutorialStep:nth-child("+index+")").addClass("currentStep");
        
        if ($("#nav .tutorialStep:nth-child("+secondIndex+")").length ) {
            $("#nav .tutorialStep:nth-child("+secondIndex+")").addClass("nextStep");
        }
        $("#commentContainer").html("");
        $.getJSON("comment/allforstep/" + step.id, function(response){
            $(response.comments).each(function(index, comment){     
                var commentHtml = "";
                commentHtml += "<div class=\"comment\"><div class=\"commentTop\">" + comment.date + "</div>";
                commentHtml += "<div class=\"commentContent\">" + comment.text + "</div>";
                commentHtml += "<div class=\"commentBottom\"><i>Written by: </i><a href=\"#u/"+comment.createdBy.id+"\">" + comment.createdBy.name + "</a></div></div>";
                $("#commentContainer").append(commentHtml);
            });
        });
    }
});